<template>
  <h1 class="h1">App</h1>
  <A>
    <!-- 使用插槽向组件中传递 html 模板 -->
    <h2 class="aaa">插槽</h2>
  </A>
  <B></B>
</template>
<script setup lang="ts">
import A from './A.vue'
import B from './B.vue'

// 插槽选择器：父组件使用插槽向子组件传递 html 模板，在父组件内选择器可以直接选中插槽内的 html 标签
// 在子组件中需要对选择器调用 :slotted() 才能选中父组件传递给子组件插槽的 html 标签

// 全局选择器：设置了 scoped 的 style 标签其中的选择器仅能选中本组件内部的标签
// 对选择器调用 :global() 可以直接选中全局的标签

// 动态 css 样式，对于 css 样式值，可以使用 v-bind() 绑定 ts 中的响应式变量
// 注意：如果响应式变量为对象形式，需要 v-bind('obj.prop') 来访问(''包裹)
// 采用动态 css 样式，可以直接在 ts 中修改样式值

// module css ：模块样式，style 标签使用 module 属性，且可以对 module 进行赋值命名
// 此时 style 标签转化为模块对象，其中的选择器为对象的属性
// 在 html 模板中可以使用属性绑定，将绑定值设置为 module 的对应选择器属性来实现样式选择
// 此时在 css module 中一般使用类名选择器来设置样式
// 默认不设置 module 名时为 $style 多个选择器时选择数组形式
// 其中 div 的样式为 color 和 border 类
// <div :class="[$style.color,$style.border]">
// 在 ts 中可以调用 useCssModule 的 hook 函数来获取 css 模块

interface Style {
  color:string
}
const style = ref<Style>({
  color:'red'
})
</script>

<style scoped lang="less">
// 插槽中的样式可以在父级组件中选择并设置 
.aaa{
  background-color: red;
}
// 在使用 scoped 设置后，选择器仅能选择本组件内的元素
// 动态样式，即将 css 样式的值使用 v-bind 绑定 ts 中定义的变量值
// 在 ts 中修改变量值，css 的样式随之变化
// 注意：如果在 ts 中使用对象形式，在 css 中 v-bind('obj.pro') 需要设置 '' 才能访问到对象的属性
h1{
  color: v-bind('style.color');
}
// 对选择器调用 :global() 函数，选择器会选择所有对应的元素
:global(h1){
  font-weight: 500;
} 
</style>
